import XsUser from './user.js'

class XsDemo extends HTMLElement {
  static get observedAttributes () {
    return ['class', 'data-name']
  }

  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback () {
    this.render()

    const closeDemo = this.shadowRoot.querySelector('.xs-artical__close')
    console.log('closeDemo :>> ', closeDemo);

    this.shadowRoot.querySelector('.xs-artical__close').addEventListener('click', (e) => {
      this.hide()
    })

    document.addEventListener('click', e => {
      const composedPath = e.composedPath()
      if (!composedPath.includes(this) && e.target.nodeName !== 'BUTTON') {
        this.hide()
      }
    })

    document.addEventListener('keyup', e => {
      if (e.keyCode === 27) {
        this.hide()
      }
    })
  }

  attributeChangedCallback (attr, oldValue, newValue) {
    // 全量修改
    // this.render()

    // 局部修改
    if (attr === 'data-name') {
      const xsUserNameDom = this.shadowRoot.querySelector('xs-user').shadowRoot.querySelector('.xs-artical__user-name')
      xsUserNameDom.textContent = newValue
    }
  }

  render () {
    const dataset = this.dataset

    const box = document.createElement('div')
    box.innerHTML = `
      <div class="xs-artical">
        <div class="xs-artical__img">
          <img src="${dataset.picture}">
        </div>

        <xs-user
          data-avatar="${dataset.avatar}"
          data-name="${dataset.name}"
          data-time="2024-12-12"
          data-location="陕西">
        </xs-user>

        <div class="xs-artical__desc">${dataset.desc}</div>

        <div class="xs-artical__close">&times;</div>
      </div>
    `

    const styles = document.createElement('style')
    styles.innerHTML = `
       :host {
        display: none;
        border: 3px solid red;
        box-sizing:border-box;
        width:50vw;
      }

      :host([green]) {
        border-color: green;
      }

      :host(.show) {
        display:block;
      }

      .xs-artical {
        margin: 30px;
        padding: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        position: relative;
      }

      .xs-artical__img {
        margin-top: -30px;
        margin-right: -30px;
        margin-left: -30px;
      }

      .xs-artical__img img {
        width: 100%;
        display: block;
      }

      .xs-artical__desc {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
      }

      .xs-artical__close {
        position: absolute;
        right:0;
        top:0;
        background-color: rgba(200, 200, 200, 0.3);
        width: 40px;
        height: 25px;
        color:white;
        border-bottom-left-radius:50px;
        text-align:center;
        font-size: 18px;
        cursor:pointer;
        user-select:none;
      }
    `

    this.shadowRoot.innerHTML = ''

    this.shadowRoot.appendChild(box)
    this.shadowRoot.appendChild(styles)
  }

  show () {
    this.classList.add('show')
  }

  hide () {
    // this.classList.remove('show')
  }
}

customElements.define('xs-demo', XsDemo)
export default XsDemo
